<template>
	<view style="position: relative; width: 100%; height: 100%; overflow: hidden; ">
		<scroll-view :style="_headerStyle">
			<view :style="'display: flex; position: relative; height: 100%; left:'+headerScrollLeft">
				<view v-for="(col, colidx) in columns" :key="colidx" style="height: 100%;">
					<view :style="'overflow: hidden; height: 100%; width:'+col.width" class="lay-c-c">{{col.name}}</view>
				</view>
			</view>
		</scroll-view>	

		<scroll-view :style="_bodyStyle" scroll-x scroll-y scroll-with-animation @scroll="onBodyScroll">
			<view v-for="(row, rowidx) in rows" :key="rowidx" :data-id="rowidx" :style="_rowStyle" @click="_onTapRow(rowidx)">
				<view v-for="(col, colidx) in columns" :key="colidx" style="height: 100%;">
					<view :style="'overflow: hidden; height: 100%; width:'+col.width" class="lay-c-c">{{rows[rowidx][colidx]}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"MyTable",
		data() {
			return { 
				headerScrollLeft:0,
			};
		},
		props: {
			columns: {
				type: Array,
				required: true,
				default: [
					{name: "column1", width: '200rpx'}, 
					{name: "column2", width: '200rpx'}]
			},
			rows: {
				type: Array,
				required: true,
				default: [["cell1-1", "cell1-2"],["cell2-1", "cell2-2"]]
			},
			headerStyle: {
				type: Object,
				required: false,
				default: function() {
					return {
						'height': '50rpx', 			// 设置表头的高度
						'background-color': '#FFF',	// 设置表头的背景色
					}
				}
			},
			bodyStyle: {
				type: Object,
				required: false,
				default: function() {
					return {
						'background-color': '#FFF',
					}
				}
			},
			rowStyle: {
				type: Object,
				required: false,
				default: function() {
					return {
						'height': '30px'
					}
				}
			},
			onTapRow: {
				type: Function,
				required: false,
				default: ()=>{}
			}
		},
		computed: {
			_headerStyle() {
				return this.bindStyle(Object.assign(this.headerStyle, {
					'position': 'relative',
					'z-index': 1,
					'width': '100%'
				}));
			},
			_bodyStyle() {
				return this.bindStyle(Object.assign(this.bodyStyle, {
					'height': '100%'
				}));
			},
			_rowStyle() {
				return this.bindStyle(Object.assign(this.rowStyle, {
					'display': 'flex',
				}));
			}
		},
		watch: {
			columns(newVal, oldVal) { 
				this.columns = newVal;
			},
			rows(newVal, oldVal) {
				this.rows = newVal;
			}
		},
		methods: {
			bindStyle(style) {
				// #ifdef H5
				return style;
				// #endif
				// #ifndef H5
				let str = JSON.stringify(style);
				str = str.substr(1, str.length-2);
				str = str.replaceAll(",", ";");
				str = str.replaceAll("\"", "");
				return str;
				// #endif
			},

			onHeaderScroll(e) {
				// this.$nextTick(()=>{
				// 	this.bodyScrollLeft = e.detail.scrollLeft;
				// })
			},
			onBodyScroll(e) {
				this.headerScrollLeft = '-'+e.detail.scrollLeft+'px';
				//console.log("this.headerScrollLeft="+this.headerScrollLeft)
			},
			
			_onTapRow(rowidx) {
				this.onTapRow(rowidx);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/leui.scss";
	scroll-view {
		white-space: nowrap;
		overflow: hidden;
	}
	
	/* scroll-view {
		background-color: white;
	} */
</style>
